<table class="forum-table">
  <thead>
    <tr> 
      <th width="100">Replies</th> 
      <th> Title/Content</th> 
      <th width="150">Views  <i class="fa fa-angle-down"></i></th> 
      <th width="40">Last Reply <i class="fa fa-angle-down"></i></th>
    </tr>
  </thead>

  <tbody id="forum_container">
    <!-- LOOP STARTS HERE -->
    <?php if($threads) { foreach ($threads as $value) { ?>
    <tr class="thread-tr">
      <td>
        <div class="rep-wrap text-center large-12 column">
          <div class="large-12 column"><h3><?= $value->replies?></h3></div>
            <div class="for-rep large-12 column">
              <strong>Replies</strong>
            </div>
        </div>
      </td>

      <td class="forum-content">
        <h4><a href="<?=BASE_URI?>be/forum_view?fhd=<?=$value->id?>"><?= $value->title ?></a></h4>
        <p>By 
            <a><?= $value->username ?></a>,  <large> <abbr class="timeago" title="<?=$value->date_created?>"></abbr></large>
            <a class="right" href=""><?= $value->category ?></a>
        <p>
          <?= $value->content ?>
        </p>

        <ul class="inline-list" style="margin-bottom:-.8rem;">
          <li>
            <label>
              <?php
                $tags = json_decode($value->tags);
                if(sizeof($tags) > 0 ){
                  foreach ($tags as $tag) {
            
              ?>
              <a class="thread-tags tiny radius button"><?= $tag ?></a>
    
              <?php } } ?>
            </label>
          </li>
          <li class="right">
            <a class="a right" data-tooltip aria-haspopup="true" class="has-tip" title="12 Tags">
              <i class="fa fa-tags"></i>
            </a>
          </li>
          <?php 
            $status = ($value->status) ? "Active" : "Inactive" ;
          ?>
          <li class="right">
            <a class="a right" data-tooltip aria-haspopup="true" class="has-tip" title="Status: <?=$status?>">
              <i class="fa fa-inbox"></i>
            </a>
          </li>
          <li class="right">
            <?php
            $total_pictures = 0;
            $pictures = json_decode($pictures);
            if($pictures->image1) $total_pictures++;
            if($pictures->image2) $total_pictures++;
            if($pictures->image3) $total_pictures++;
            ?>
            <a class="a right" data-tooltip aria-haspopup="true" class="has-tip" title="<?=$total_pictures?> Images">
              <i class="fa fa-paperclip"></i>
            </a>
          </li>
        </ul>
      </td>
      <td class="text-center" style="color:gray;"><?= $value->views ?></td>
      <?php 
        $last_reply = json_decode($value->last_reply);
        $username = ($last_reply->username) ? $last_reply->username : "None";
      ?>
      <td class="text-center">
        <a style="color:#009EA1;"><?= $username ?></a>
        <?php if($username != "None") { ?>
        <p><small><i class="fa fa-clock-o"> <abbr class="timeago" title="<?=$last_reply->date_created?>"></abbr></i></small></p>
        <?php } ?>
      </td>
    </tr> 
    <?php } } ?>
  <!-- LOOP ENDS HERE -->
  </tbody>
</table>
    <div class="text-center large-12 column" style="background:#009EA1;padding:0;">
      <a class="expand button" style="background:#009EA1;margin:0;">Load more</a>
    </div>
  </div>



<script type="text/javascript">
      $(function(){

      function addForum(data){
          var template = $('#forumTpl').html();
          var html = Mustache.to_html(template,data);
          $(html).prependTo('#forum_container').hide().fadeIn('slow');
      }

          $(document).ready(function(){
              jQuery("abbr.timeago").timeago();

              var pusher = new Pusher(PUSHER_APP_KEY);
              var channel = pusher.subscribe('my-channel');
              
              channel.bind('added-forum', function(data) {
                addForum(data);
                jQuery("abbr.timeago").timeago();
              });
          });
      });
  </script>


  <script type="text/template" id="forumTpl">
     <tr class="thread-tr">
      <td>
        <div class="rep-wrap text-center large-12 column">
          <div class="large-12 column"><h3>0</h3></div>
            <div class="for-rep large-12 column">
              <strong>Replies</strong>
            </div>
        </div>
      </td>

      <td class="forum-content">
        <h4><a href="<?=BASE_URI.'be/forum_view?fhd='?>{{id}}">{{title}}</a></h4>
        <p>By 
            <a>{{username}}</a>, <small>ABOUT 17 HOURS AGO</small> 
            <a class="right" href="">{{category}}</a>
        <p>
          {{content}}
        </p>

        <ul class="inline-list" style="margin-bottom:-.8rem;">
          <li>
            <label>
              <a class="thread-tags tiny radius button">{{category}}</a>
            </label>
          </li>
          <li class="right">
            <a class="a right" data-tooltip aria-haspopup="true" class="has-tip" title="12 Tags">
              <i class="fa fa-tags"></i>
            </a>
          </li>
           
          <li class="right">
            <a class="a right" data-tooltip aria-haspopup="true" class="has-tip" title="Status: {{status}}">
              <i class="fa fa-inbox"></i>
            </a>
          </li>
          <li class="right">
            <a class="a right" data-tooltip aria-haspopup="true" class="has-tip" title="{{total_pictures}} Images">
              <i class="fa fa-paperclip"></i>
            </a>
          </li>
        </ul>
      </td>
      <td class="text-center" style="color:gray;">{{views}}</td>
      <td class="text-center">
        
      </td>
    </tr> 
  </script>